<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿百度界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f8f8f8;
            border-bottom: 1px solid #e5e5e5;
        }

        header ul {
            margin: 0;
            padding: 0;
            display: flex;
        }

        header li {
            float: left;
            margin-right: 20px;
            list-style: none;
            font-size: 13px;
        }

        header a {
            text-decoration: none;
            color: #333;
        }

        header a:hover {
            color: #1a73e8;
        }

        #main {
            height: 85vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #form {
            width: 60vw;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #form img {
            width: 270px;
            margin-bottom: 20px;
        }

        #search-container {
            display: flex;
            width: 100%;
            border: 1px solid #dfe1e5;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: none;
            transition: box-shadow 0.3s ease;
        }

        #search-container:hover {
            box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
            border-color: rgba(223, 225, 229, 0);
        }

        #sousuo {
            flex: 1;
            border: none;
            padding: 10px 15px;
            font-size: 16px;
            outline: none;
        }

        #baiduyixia {
            background-color: #4285f4;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #baiduyixia:hover {
            background-color: #357ae8;
        }

        footer {
            background-color: #f2f2f2;
            border-top: 1px solid #e4e4e4;
            padding: 10px 20px;
            display: flex;
            justify-content: center;
        }

        footer ul {
            margin: 0;
            padding: 0;
            display: flex;
        }

        footer li {
            float: left;
            margin-right: 20px;
            list-style: none;
            font-size: 12px;
        }

        footer a {
            text-decoration: none;
            color: #70757a;
        }

        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>

    <!-- 头部 -->
    <header>
        <ul>
            <li><a href="">新闻</a> </li>
            <li><a href="">hao123</a></li>
            <li><a href="">地图</a></li>
            <li><a href="">贴吧</a></li>
            <li><a href="">视频</a></li>
            <li><a href="">图片</a></li>
            <li><a href="">网盘</a></li>
            <li><a href="">文库</a></li>
            <li><a href="">更多</a></li>
        </ul>

        <ul>
            <li>锦江</li>
            <li>设置</li>
            <li>logo</li>
        </ul>
    </header>
    <!-- 主区域 -->
    <div id="main">
        <div id="form">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
            <div id="search-container">
                <input type="text" id="sousuo" placeholder="输入文字">
                <input type="button" id="baiduyixia" value="百度一下">
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <ul>
            <li><a href="">关于百度</a> </li>
            <li><a href=""> About Baidu</a></li>
            <li><a href="">使用百度前必读</a></li>
            <li><a href="">帮助中心企业推广</a></li>
            <li><a href="">京公网安备11000002000001号</a></li>
            <li><a href="">京ICP证030173号</a></li>
            <li><a href="">互联网新闻信息服务许可证11220180008</a></li>
        </ul>
    </footer>

</body>

</html>
    